<template>
    <div class="page_index index_banner" :style="{ backgroundImage: 'url(' + indexbg + ')' }">
        <el-row style="height: 100%">
            <el-col :span="14" style="height: 100%;
    align-content: center;">
                <div>
                    <div style="font-size: 30px;color:#fff;">
                        <img src="../../assets/logoVWhite.png" style="width: 200px;"
                            @click="() => { this.$router.push('/') }" />
                    </div>
                    <div style="font-size: 20px;color:#fff;margin-top: 50px;">
                        AI心理测评时代领航者
                    </div>
                </div>
            </el-col>
            <el-col :span="10">
                <div style="background-color: #ffffff99;height: 100%;
    align-content: center;">
                    <div style="padding:10px">
                        <el-card style="">
                            <div style="padding:10px">
                                <div style="text-align: left;">
                                    <h3>加入含光AI心理测评</h3>
                                </div>
                                <el-form label-position="top">
                                    <el-form-item label="账号">
                                        <el-input v-model="form.userName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input type="password" v-model="form.password"></el-input>
                                    </el-form-item>
                                    <el-form-item label="昵称">
                                        <el-input v-model="form.nickName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系方式">
                                        <el-input v-model="form.tele"></el-input>
                                    </el-form-item>
                                    <el-form-item label="年龄">
                                        <el-input type="number" v-model="form.age"></el-input>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <el-segmented v-model="form.sex" :options="['男', '女']" size="large" />
                                    </el-form-item>
                                    <el-form-item label="最高教育阶段">
                                        <el-segmented v-model="form.edu" :options="['小学', '初中', '高中', '本科', '硕士', '博士']"
                                            size="large" @keyup.enter="register" />
                                    </el-form-item>
                                    <el-form-item label="">
                                        <el-button type="primary" @click="register">注册</el-button>
                                        <el-button link
                                            @click="() => { this.$router.push('/login') }">已有账号？前往登录</el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import indexbg from '../../assets/bg.jpg'
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            indexbg: indexbg,
            form: { userName: "", password: "", nickName: '', tele: '', sex: '男', age: '', edu: '本科' }
        }
    },
    methods: {
        async register() {
            console.log('准备注册:::', this.form)
            let rs = await POST('/user/register', 'POST', this.form, true)
            console.log("注册结果:::", rs)
        }
    }
}
</script>

<style>
.page_index {
    background-color: transparent;
    background-position: center;
    background-size: cover;
    position: relative;
    width: 100%;
    text-align: center;
    height: 100%;
}

.index_banner {
    background: rgba(0, 82, 217, 0.01);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    text-align: center;
}

.create_wj {
    background-image: url(footerbg);
    background-size: cover;
    background-position: center;
    width: 100%;
    padding: 100px auto;
}
</style>